<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Application Controller</title>
		<link rel="stylesheet" href="web.css" media="screen">
		<link rel="stylesheet" href="style.css" media="screen">
	
		<link rel="stylesheet" href="js/dojoroot/dijit/themes/claro/claro.css" media="screen">
<!-- 
			load dojo and provide config via data attribute
			NB: dojox.data.FlickrStore is broken in 1.6.0
				so, until 1.6.1 is out, I've put up an xdomain build on my dtk sandbox
		 -->
		<!-- load dojo and provide config via dojoConfig global -->
		<script>
			dojoConfig = {
				isDebug: true,
				parseOnLoad: true,
				modulePaths: {
					"ecm": "../../easy/ecm/"
				},
				flickrRequest: {
					apikey: "8c6803164dbc395fb7131c9d54843627",
					sort:[{
						attribute: 'datetaken',
						descending: true
					}]
				}
			};
		</script>
		<!-- <script src="http://sfoster.dojotoolkit.org/dojobox/1.6/release/debug/dojo/dojo.xd.js"></script> -->
			<script src="js/dojoroot/dojo/dojo.js" type="text/javascript"></script>
		<script>
			// load initial set of dependencies - the app controller
			dojo.require("ecm.Container");

			dojo.ready(function(){
				// do whatever the controller considers necessary for initialization
				ecm.Container.init();
			});
		</script>
	</head>
	<body class="claro">
		<script>
			// can be in the markup already, or added by script
			(function(){
				var wrapper = dojo.create('div', {
					id: 'loadingOverlay',
					'class': 'pageOverlay',
					innerHTML: '<div class="loadingMessage">Loading...</div>'
				}, dojo.body());
			})();
		</script>
		<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
				<!-- toolbar with new mail button, etc. -->
				<div dojoType="dijit.Toolbar" region="top">
						Top
				</div>
				<div dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs" region="center">
					<!-- main section with tree, table, and preview -->
					<div dojoType="dijit.layout.BorderContainer" id="inbox" title="Inbox" design="sidebar">
						
						<div dojoType="dijit.layout.AccordionContainer" id="accordion"	region="leading" minSize="20" style="width:20%;" splitter="true">
							<div dojoType="dijit.layout.ContentPane" title="Folders">
								<!-- message preview pane -->
								<div id="message2" dojoType="dijit.layout.ContentPane" tabindex="0" region="center" role="document" aria-live="assertive" aria-atomic="true" minSize="20">
									<!-- Tree definition -->
									<div dojoType="dojo.data.ItemFileReadStore" jsId="sysConfigTreeStore"
										url="secMenu.json" urlPreventCache="true"></div>
										
									<div dojoType="dijit.tree.TreeStoreModel" jsId="sysConfigTreeModel"
						        		store="sysConfigTreeStore" query="{itemId:'root'}"></div>
					        		<div dojoType="dijit.Tree" id="sysConfigTree" model="sysConfigTreeModel" showRoot="false" autoExpand="true" >
					        		Loading.......
						
						        	</div>	
						        	
								</div> <!-- end of "message" -->
							</div>

						</div>  <!-- end of Accordion -->
						
						<!-- ------------ -->
						<!-- Content pane -->
						<!-- ------------ -->
						<div id="secConfigContentStack" dojoType="dijit.layout.StackContainer"		 region="center" class="ContentPane">
						
							<!-- message preview pane -->
							<div id="message" dojoType="dijit.layout.ContentPane" tabindex="0" region="center" role="document" aria-live="assertive" aria-atomic="true" minSize="20">
								<p>
								This is a simple application mockup showing some of the dojo widgets:
								</p>
								<ul>
								  <li>layout widgets: BorderContainer, AccordionContainer</li>
								  <li>TooltipDialog, Tooltip</li>
								  <li>Tree</li>
								  <li>form widgets: Button, DropDownButton, ComboButton, FilteringSelect, ComboBox</li>
								  <li>Editor</li>
								</ul>

						</div> <!-- end of "message" -->						
						</div>
		

		
					</div> <!-- end of inbox -->
					
					<div dojoType="dijit.layout.BorderContainer" title="Contacts">

					</div>
		
				</div> <!-- end of TabContainer -->

		<div dojoType="dijit.layout.ContentPane" region="bottom" id="footer" align="left">
			<span style="float:right;">EasyEcm v1.2 (demo only)</span>
			<div id="fetchMail" style="opacity:0;visibility:hidden">
				<div id="fakeFetch" dojoType="dijit.ProgressBar" style="height:15px; width:275px;" indeterminate="true" ></div>
			</div>
		</div> 

		</div>
	</body>
</html>
		